<template>
  <div>
    <van-nav-bar
    class="tou"
    :fixed=true
    >
    </van-nav-bar>

	<van-action-sheet
	  v-model="show"
	  :actions="actions"
	  cancel-text="取消"
	  round:false
	 close-on-click-action:false
	  @cancel="onCancel"
    @select="xuan"
	/>

    <div class="zezao">
      <h2>{{name}}</h2>
      <div class="messages">
        <span class="message" v-tap="{methods:message}">个人信息</span>
        <span class="ping">0个待评测</span>
      </div>
      <div class="ranklist">
        <p v-tap="{methods:bang}"><span>未上榜</span><span>本月排行<van-icon name="arrow" /></span></p>
        <p v-tap="{methods:account}"><span>0</span><span>我的账户<van-icon name="arrow" /></span></p>
      </div>
    </div>

    <div>
      <ul class="setting">
        <li>
          <p v-tap="{methods:orders}"><span>星选订单</span><van-icon name="arrow" /></p>
          <p>
            <span  v-tap="{methods:orders}">待付款</span>
            <span  v-tap="{methods:orders}">待发货</span>
            <span  v-tap="{methods:orders}">待收货</span>
            <span v-tap.stop="{methods:opro}">退款退货</span>
          </p>
        </li>
        <li v-tap="{methods:oproblem}"><span>订单问题</span><van-icon name="arrow" /></li>
        <li v-tap="{methods:service}"><span>联系客服</span><van-icon name="arrow" /></li>
        <li v-tap="{methods:apply}"><span>申请入驻</span><van-icon name="arrow" /></li>
        <li v-tap="{methods:more}"><span>更多设置</span><van-icon name="arrow" /></li>

      </ul>
    </div>


  </div>
</template>

<script>
  export default{
    name:'Setting',
    data(){
      return{
        active:2,
        name:localStorage.name,
         show: false,
         actions:[
           {name:'我是博客',},
           { name:'我是商家',}
         ],
      }
    },
    mounted() {
      this.$emit('toparent',this.title)
    },
    methods:{
      message(){
        this.$router.push('/message')
        if(!localStorage.getItem('img')){
          localStorage.setItem('img','https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2106576569,1964628658&fm=15&gp=0.jpg')
        }
      },
      account(){
        this.$router.push('/account')
      },
      more(){
        this.$router.push('/more')
      },
      bang(){
        this.$router.push('/ranking')
      },
      oproblem(){
        this.$router.push('/oproblem')
      },
      opro(){
        this.$router.push('/oproblem')
      },
      service(){
        this.$router.push('/service')
      },
      orders(){
        this.$router.push('/orders')
      },
      apply(){
        this.show=true
      },
      onCancel() {
          this.show = false;
      },
      xuan(item,index){
        if(index==0){
          this.$router.push('/blogger')
        }else{
          this.$router.push('/store')
        }
      }

    }
  }
</script>

<style scoped="">
  .tou{
    height: 240px;
    background:url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2106576569,1964628658&fm=15&gp=0.jpg) no-repeat center/cover;
  }
  .zezao{
    position: relative;
    z-index: 3;
    left: 0;
    height: 240px;
    background: rgba(0,0,0,.5);
    overflow: hidden;
    padding:24px 20px 20px ;
    box-sizing: border-box;
    margin-top: -60px;
  }
  .zezao h2{
    font-size: 30px;
    color: #fff;
    text-align: left;
    height: 30px;
    line-height: 30px;
  }
  .zezao .messages{
    width: 140px;
    height: 20px;
    display: flex;
    justify-content: space-between;
  }
 .zezao .message{
   width:60px ;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #c2be99;
    border: 1px solid #c2be99;
    border-radius: 18px;
  }
  .zezao .ping{
    color: #c2be99;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
  }
  .ranklist{
    width: 200px;
    height: 60px;
    display: flex;
    margin-top: 50px;
  }
  .ranklist p{
    width: 70px;
    text-align: left;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #8b865a;
    padding: 0 12px;
  }
  .ranklist p span:nth-child(1){
    font-size: 18px;
    color: #fab811;
    line-height: 24px;
  }
  .ranklist p span:nth-child(2){
    font-size: 14px;
    color: #b5b299;
  }
  .setting{
    width:100% ;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
   }
   .setting li{
     display: flex;
      justify-content: space-between;
      align-items: center;
     font-size: 18px;
     height: 60px;
     border-bottom: 1px solid #CCCCCC;
   }
   .setting li:nth-child(1){
     height: 120px;
     display: flex;
     flex-direction: column;
   }
   .setting li:nth-child(1) p{
     width: 100%;
     height: 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .setting li:nth-child(1) p:nth-child(2){
     margin-top: -10px;
   }
   .setting li:nth-child(1) p:nth-child(2) span{
     text-align: center;
     border: 1px solid #CCCCCC;
     border-radius: 20px;
     line-height: 30px;
     padding:0 10px;
     box-sizing: border-box;
   }
</style>
